<template>
  <div>
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.imageUrl" alt="" class="imgSize" />
      </el-carousel-item>
    </el-carousel>
    <!--  推荐歌单 -->
    <div class="tltle">
      <img src="../../assets/image/音乐 (1).png" alt="" />
      推荐歌单
    </div>
   <div class="troListBiga">
      <div v-for="(item, index) in list" :key="index" class="troListBoxa">
        <div class="troListImg">
          <img :src="item.picUrl" alt="" :title="item.name" />
        </div>
        <div class="troListName">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="tltle">
      <img src="../../assets/image/音乐 (2).png" alt="" />
      最新音乐
    </div>
    <div class="newMusci_Big">
      <div class="newMusci" v-for="(item, index) in newMusic" :key="index">
        <div class="newMusicBgc" @click="playMusic(item.id)"></div>
        <div class="newMusci_img">
           <img src="../../assets/image/播放.png" alt="" class="newMusicBtn">
           
          <img :src="item.picUrl" alt="" class="newMusciImg">
        </div>
        <div class="newMusci_INTRO">
          <div class="newMusci_name">{{ item.name }}</div>
          <div class="newMusci_singer">{{ item.song.artists[0].name }}</div>
        </div>
      </div>
    </div>

    <!-- 最新MV -->
    <div class="tltle">
      <img src="../../assets/image/音乐 (3).png" alt="" />
      推荐MV
    </div>

    <div class="newMv_big">
      <div class="newMv_box" v-for="(item,index) in newMv" :key="index">
        <div class="newMv_pic">
          <div class="newMvBgc"></div>
          <img src="../../assets/image/播放 (1).png" alt="" class="newMvBtn">
          <img :src="item.picUrl" alt=""  class="newMvPic">
        </div>
        <div>
          <div class="newMv_tro">{{ item.name }}</div>
          <div class="newMv_name">{{ item.artistName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/01.discover.css";
import axios from "axios";
export default {
  data() {
    return {
      //轮播图
      banners: [],
      //推荐歌单
      list: [],
      //最新音乐
      newMusic: [],
      newMv: [],
    };
  },
  created() {
    //轮播图
    axios({
      method: "get",
      url: "https://autumnfish.cn/banner",
    })
      .then((res) => {
        // console.log(res.data.banners);
        this.banners = res.data.banners;
      })
      .catch((err) => {
        console.log(err);
      });

    //推荐歌单
    axios({
      method: "get",
      url: "https://autumnfish.cn/personalized",
      params: {
        limit: 10,
      },
    })
      .then((res) => {
        // console.log(res);
        this.list = res.data.result;
        // console.log(this.list);
      })
      .catch((err) => {
        console.log(err);
      });
    //最新音乐
    axios({
      method: "get",
      url: "https://autumnfish.cn/personalized/newsong",
      //  params: {
      //     limit: 1,
      //   },
    })
      .then((res) => {
        // console.log(res);
        this.newMusic = res.data.result;
        // console.log(this.list);
      })
      .catch((err) => {
        console.log(err);
      });
    //最新mv
    axios({
      method: "get",
      url: "https://autumnfish.cn/personalized/mv",
      data: {},
    }).then((res) => {
      // console.log(res);
      this.newMv = res.data.result;
      // console.log(this.newMv);
    });
  },
  //歌曲播放
  methods: {
    playMusic(id) {
      axios({
        method: "get",
        url: "https://autumnfish.cn/song/url",
        params: {
          id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        //设置给 父组件的 播放地址
        this.$parent.musicUrl = url;
      });
    },
  },
};
</script>

<style>
body {
  width: 100%;
  background-color: #545c64;
}
</style>